<template>
	<view class="vwh df-yc">
		<!-- 导航栏 -->
		<view class="navbar w100" :style="{ background: bgcolor }">
			<cu-custom :isBack="true" :showBackIcon="true">
				<block slot="backText">
					<text class="nav-title fs32 white shopro-selector-rect">我的好友</text>
				</block>
			</cu-custom>
		</view>
		<!-- 内容 -->
		<view @tap="jump('/pages/index/nodegame')" class="top bs px30 mt30 df-xb ai">
			<view class="left df-y">
				<text style="color: #624121;" class="shsc fb fs36">加入成事节点赛</text>
				<text style="color: rgba(98, 65, 33, 0.7);" class="fs24 mt20">一起瓜分百万大奖</text>
			</view>
			<view style="color: #FFE3C9;" class="btn shsc df-c fb">立即加入</view>
		</view>
		<view class="empty df-c w100 br-10 mt30" v-if="friendList.length==0">
			<view v-if="friendList.length==0" style="color:#cccccc" class="w100 fs26 df-c">
				<view class="df-c">
					<u-line length="50" color="#cccccc"></u-line>
					<view class="ma10">暂无好友</view>
					<u-line color="#cccccc" length="50"></u-line>
				</view>
			</view>
		</view>
		<view v-if="friendList.length!=0" class="content df-yc bs px30 wh100">
			<view style="margin-top: 60rpx;" class="title w100 df-xb ai mb30">
				<text style="color: #622129;" class="shsc fb fs32">好友贡献榜</text>
				<text style="color: #DF994D;" class="fs24">好友购买成事茶，你可获得茶多酚</text>
			</view>
			<view class="h100 df-yc"
				style="overflow: hidden;min-height: 250rpx;border-radius: 20rpx;background-color: #FFFFFF;">
				<view style="overflow: hidden;" class="list bs wh100 df-yc" v-if="friendList.length!=0">
					<scroll-view @scrolltolower="refresh" scroll-y="true">
						<view class="items w100 bs px30">
							<view class="item w100 bb df-xb ai" v-for="item in friendList">
								<view class="left df ai">
									<view style="overflow: hidden;width:70rpx ;height: 70rpx;"
										class="head-img mr20 br-cir">
										<image style="width:70rpx ;height: 70rpx;" :src="item.avatar" mode="widthFix">
										</image>
									</view>
									<view class="name fs28 one-t">{{item.nickname}}</view>
								</view>
								<view class="code df-c fs24">已贡献<view class="mx10 one-t"
										style="color:#DF994D ;max-width: 100rpx;">
										{{item.contribution}}
									</view>点茶多酚</view>
							</view>
						</view>
						<view class="w100 df-c">
							<u-loading :show="showLoading" mode="circle"></u-loading>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view @click="jump('/pages/public/poster/index',{posterType:'seal'})" class="button fs28 white df-c">
			<image style="width: 28rpx;" src="../../../static/imgs/images/jxyqhy.png" mode="widthFix"></image>
			<text class="ml20">{{friendList.length==0?'立即邀请好友':'继续邀请好友'}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				temImgUrl: this.$IMG_URL_TEMP,
				friendList: [],
				page: 1,
				domain: this.$IMG_URL,
				showLoading: false,
				last_page: 0
			};
		},
		created() {
			this.getFriend()
		},
		methods: {
			// 路由跳转
			jump(path, params) {
				this.$Router.push({
					path: path,
					query: params
				});
			},
			// 获取用户好友列表
			getFriend() {
				this.$api('user.friend', {
					page: this.page
				}).then(res => {
					this.showLoading = false
					this.last_page = res.data.last_page
					this.friendList = this.friendList.concat(res.data.data)
				})
			},
			refresh() {
				if (this.page < this.last_page) {
					this.showLoading = true
					this.page++
					this.getFriend()
				}

			}
		},
	}
</script>

<style lang="scss" scoped>
	.nav-title {
		color: #191919;
	}

	.content {
		height: 100%;
		overflow: hidden;
		padding-bottom: 170rpx;
	}

	.empty {
		width: 690rpx;
		background-color: #FFFFFF;
		height: 120rpx;
	}

	scroll-view {
		height: 100%;
	}

	.top {
		width: 690rpx;
		height: 173rpx;
		background: linear-gradient(270deg, #FFDDBE, #FFE9D5);
		border-radius: 20rpx;

		.btn {
			width: 193rpx;
			height: 70rpx;
			background: #622129;
			border-radius: 35rpx;
		}
	}

	.button {
		width: 630rpx;
		height: 110rpx;
		background: linear-gradient(270deg, #53181E, #7D333B);
		box-shadow: 0px 5rpx 18rpx 0px rgba(83, 24, 30, 0.35);
		border-radius: 55rpx;
		position: fixed;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.item {
		height: 150rpx;
	}

	.list {
		.items {
			width: 690rpx;
			background: #FFFFFF;
			overflow: hidden;

			.item:last-child {
				border-bottom: none;
			}
		}

		.left {
			width: 280rpx;
		}
	}
</style>
